<template>
  <div id="app">
    <router-view/>
    <RouterView name="Footer"></RouterView>
  </div>
</template>
<script>
import { RouterView } from 'vue-router';


export default {
    components: { RouterView }
}
</script>
<style>
*{
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
html,body,#app{
  height: 100%;
}
html{
  /* 设置这个font-size: 26.67vw后期 1rem=100px */
  font-size: 26.67vw; 
  /* 1vw = 视口宽度（375px）的百分之一
     1vw = 3.75px
     1px = 1/3.75vw = 0.2667
     100px = 26.67vw

     1rem = 100px
     1rem = 根元素的字体大小  100px
  */
}
body{
  font-size: 16px;
}
#app{
  display: flex;
  /* 主轴的方向设置为纵向 */
  flex-direction: column;   
}
#app .box{
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
#app .box .header{
  justify-content: center;
  align-items: center;
  display: flex;
  height: .44rem;
  background-color: rgb(24, 165, 64);
  /* position: relative; */
}
#app .box .main{
  flex: 1;
  overflow-y: auto;
  background-color: rgb(253, 203, 211);
}
#app .footer{
  height: .44rem;
  background-color: rgb(170, 166, 162);
}
#app .footer ul{
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
/* li上面的类名，交叉选择器 */
#app .footer ul li.router-link-exact-active{
  color: blue;
}
#app .footer ul li{
  display: flex;
  flex-direction: column;
  align-items: center;
}
#app .footer ul li span{
  font-size: .2rem;
}
</style>
